<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>推荐位管理</el-breadcrumb-item>
        <el-breadcrumb-item>tab列表</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @row-del="rowDel"
      >
        <!-- 版本 -->
        <template slot="app_version" slot-scope="scope">
          <span v-if="scope.row.tab_type == 1"> 通用 </span>
          <span v-else>{{ scope.row.app_version }}</span>
        </template>
        <!-- 选中时名称 -->
        <template slot="select_tab_name" slot-scope="scope">
          <span v-if="scope.row.tab_name_type == 1">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.select_tab_name"
              :preview-src-list="[scope.row.select_tab_name]"
            >
            </el-image>
          </span>
          <span v-else>{{ scope.row.select_tab_name }}</span>
        </template>
        <!-- 未选中时名称 -->
        <template slot="unselect_tab_name" slot-scope="scope">
          <span v-if="scope.row.tab_name_type == 1">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.unselect_tab_name"
              :preview-src-list="[scope.row.unselect_tab_name]"
            >
            </el-image>
          </span>
          <span v-else>{{ scope.row.unselect_tab_name }}</span>
        </template>
        
        <!-- 自定义菜单删除 -->
        <template slot-scope="scope" slot="menu">
          <el-button
            icon="el-icon-delete"
            :size="scope.size"
            :type="scope.type"
            @click="rowDel(scope.row)"
            v-if="scope.row.tab_type != 1"
            >删除</el-button
          >
          <span v-else>
            &nbsp;
            <el-button
              icon="el-icon-setting"
              :size="scope.size"
              :type="scope.type"
              @click="setDefault(scope.row.id)"
              v-if="scope.row.is_default == 0"
              >设为默认&nbsp;</el-button
            >
            <el-button
              icon="el-icon-s-tools"
              :size="scope.size"
              type="success"
              v-else
            >
              已设默认
            </el-button>
          </span>

          <el-button
            v-if="scope.row.is_default != 1"
            :size="scope.size"
            :type="scope.type"
            @click="setIsOnline(scope.row.is_online == 1 ? 0 : 1, scope.row.id)"
            >{{ scope.row.is_online == 1 ? "下线" : "上线" }}</el-button
          >
        </template>
        <!-- 自定义菜单设置为默认选中 -->
        <template slot="last" slot-scope="scope">
          {{ scope.row.edit_time }}
          <el-tag>{{ scope.row.edit_admin_name }}</el-tag>
        </template>
        <template slot-scope="scope" slot="menuLeft">
          <el-tag type="danger">
            <b>*支持版本向上兼容</b>
          </el-tag>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>


<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { appConfigTab as baseURL, uploadFile,getGroupList } from "@/api/cat/baseUrls";
import { selectVersion } from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      selectType: 2,
      is_show_url: true,
      page: {
        total: 0,
        pageSize: 10,
        // pageSizes:[1,2,3]
      },
      type: true,
      data: [],
      params: {},
      form: {},
      default: {
        orderByList: "show_order&ASC",
      },
      option: {
        border: true,
        align: "center",
        headerAlign: "center",
        delBtn: false,
        index: true,
        indexLabel: "编号",
        column: [
          {
            label: "版本号",
            prop: "app_version",
            type: "select",
            search: true,
            span: 12,
            row: true,
            slot: true,
            placeholder: "请输入版本号",
            dicUrl: `${catUrl}/${selectVersion.selectVersion}`,
            props: {
              label: "app_version",
              value: "app_version",
            },
            dicFormatter: (res) => {
              return res.source;
            },
            rules: [
              {
                required: true,
                message: "版本号必须填写",
              },
            ],
          },
          {
            label: "语言",
            prop: "language",
            type: "select",
            search: true,
            placeholder: "请选择语言",
            dicData: [
              {
                label: "英语",
                value: 2,
              },
              {
                label: "芬兰语",
                value: 3,
              }
            ],
            props: {
              label: "label",
              value: "value",
            },
            rules: [
              {
                required: true,
                message: "请选择语言类型",
              },
            ]
          },
          // {
          //   label: "用户群组",
          //   prop: "group_id",
          //   type: "select",
          //   search: true,
          //   placeholder: "用户属性",
          //   dicUrl: `${catUrl}/${getGroupList.getGroupList}`,
          //   props: {
          //     label: "group_name",
          //     value: "group_id",
          //   },
          //   dicFormatter: (res) => {
          //     return res.source;
          //   },
          // },
          {
            label: "tab标题(运营后台显示)",
            prop: "tab_title",
            type: "input",
            span: 12,
            hide: true,
            row: true,
            rules: [
              {
                required: true,
                message: "tab标题(运营后台显示)必须选择",
              },
            ],
          },
          {
            label: "tab类型",
            prop: "tab_type",
            type: "select",
            value: 1,
            filter: false,
            search: true,
            placeholder: "请选择tab类型",
            dicData: [
              {
                label: "常驻",
                value: 1,
              },
              {
                label: "自定义普通",
                value: 2,
              },
              {
                label: "自定义h5",
                value: 3,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
            change: (value) => {
              let url = this.findObject(this.option.column, "jump_url");
              if (value.value == 2) {
                url.addDisplay = true;
                url.editDisplay = true;
              } else {
                url.addDisplay = false;
                url.editDisplay = false;
              }
            },
          },
          {
            label: "tab名称类型",
            prop: "tab_name_type",
            type: "select",
            value: 2,
            filter: false,
            placeholder: "请选择tab类型",
            hide: true,
            dicData: [
              {
                label: "图片",
                value: 1,
              },
              {
                label: "文字",
                value: 2,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
            rules: [
              {
                required: true,
                message: "tab名称类型必须选择",
              },
            ],
            change: (value) => {
              let select_tab_name = this.findObject(
                this.option.column,
                "select_tab_name"
              );
              let select_tab_name_2 = this.findObject(
                this.option.column,
                "select_tab_name_2"
              );
              let unselect_tab_name = this.findObject(
                this.option.column,
                "unselect_tab_name"
              );
              let unselect_tab_name_2 = this.findObject(
                this.option.column,
                "unselect_tab_name_2"
              );


              let selectColor = this.findObject(
                this.option.column,
                "select_color"
              );

              let selectColor2 = this.findObject(
                this.option.column,
                "unselect_color"
              );

              //选择为图片
              if (value.value == 1) {
                //显示图片
                select_tab_name_2.addDisplay = true;
                select_tab_name_2.editDisplay = true;

                unselect_tab_name_2.addDisplay = true;
                unselect_tab_name_2.editDisplay = true;
                //隐藏文字
                select_tab_name.addDisplay = false;
                select_tab_name.editDisplay = false;
                unselect_tab_name.addDisplay = false;
                unselect_tab_name.editDisplay = false;

                //隐藏色号选择
                selectColor.addDisplay = false;
                selectColor2.addDisplay = false;

                selectColor.editDisplay = false;
                selectColor2.editDisplay = false;

                //选择文字
              } else {
                //隐藏图片
                select_tab_name_2.addDisplay = false;
                select_tab_name_2.editDisplay = false;

                unselect_tab_name_2.addDisplay = false;
                unselect_tab_name_2.editDisplay = false;
                //显示文字
                select_tab_name.addDisplay = true;
                select_tab_name.editDisplay = true;
                unselect_tab_name.addDisplay = true;
                unselect_tab_name.editDisplay = true;

                //显示色号选择
                selectColor.addDisplay = true;
                selectColor2.addDisplay = true;

                selectColor.editDisplay = true;
                selectColor2.editDisplay = true;
              }
            },
          },
          {
            label: "tab名称(选中)",
            prop: "select_tab_name",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            span: 12,
            row: false,
            slot: true,
            rules: [
              {
                required: true,
                message: "tab名称必须选择",
              },
            ],
          },
          {
            label: "tab名称(未选中)",
            prop: "unselect_tab_name",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            span: 12,
            slot: true,
            rules: [
              {
                required: true,
                message: "tab名称必须选择",
              },
            ],
          },
          {
            label: "选中状态色值",
            prop: "select_color",
            type: "color",
            hide: true,
            // colorFormat:hsl,
            placeholder: "本项选填,未填写与其他常驻的选中状态一致",
            span: 12,
          },
          {
            label: "未选中状态色值",
            prop: "unselect_color",
            type: "color",
            hide: true,
            // colorFormat:hsl,
            placeholder: "本项选填,未填写与其他常驻的未选中状态一致",
            span: 12,
          },
          {
            label: "未选中状态图",
            prop: "unselect_tab_name_2",
            type: "upload",
            span: 12,
            addDisplay: false,
            editDisplay: false,
            hide: true,
            listType: "picture-img",
            action: `${catUrl}${uploadFile.uploadFile}`,
            propsHttp: {
              url: "source",
            },
            rules: [
              {
                required: true,
                message: "未选中状态图必须选择",
              },
            ],
          },
          {
            label: "选中状态图:(本项为选填，未填入默认未选中状态图)",
            prop: "select_tab_name_2",
            type: "upload",
            span: 12,
            addDisplay: false,
            editDisplay: false,
            hide: true,
            listType: "picture-img",
            action: `${catUrl}${uploadFile.uploadFile}`,
            propsHttp: {
              url: "source",
            },
          },
          {
            label: "跳转路径",
            prop: "jump_url",
            type: "input",
            hide: true,
            row: true,
            addDisplay: false,
            editDisplay: false,
            rules: [
              {
                required: true,
                message: "跳转路径必须填写",
              },
            ],
          },
          {
            label: "顺序",
            prop: "show_order",
            type: "input",
            rules: [
              {
                required: true,
                message: "顺序必须填写",
              },
            ],
          },
          {
            label: "上线状态",
            prop: "is_online",
            type: "select",
            search: true,
            placeholder: "请选择上线状态",
            value: 1,
            dicData: [
              {
                label: "上线",
                value: 1,
              },
              {
                label: "下线",
                value: 0,
              },
            ],
            rules: [
              {
                required: true,
                message: "上线状态必须填写",
              },
            ],
          },
          {
            label: "开始日期",
            prop: "start_date",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            placeholder: "开始日期",
          },
          {
            label: "结束日期",
            prop: "end_date",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            placeholder: "结束日期",
          },
          {
            label: "用户属性",
            prop: "new_user",
            type: "select",
            search: true,
            placeholder: "请选择用户属性",
            dicData: [
              {
                label: "新用户",
                value: 0,
              },
              {
                label: "老用户",
                value: 1,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
          },
          {
            label: "最后操作信息",
            prop: "last",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
            readonly: true,
            slot: true,
          },
        ],
      },
    };
  },
  async created() {
    //查询跳转页面列表
    // let { data } = await common(baseURL.getSkippaheType, null, null, "GET");
    // this.option.column[5].dicData = data;
  },
  methods: {
    /**获取列表 */
    async getList() {
      this.loading = true;
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await common(
        `${baseURL.pageAndParam}`,
        { ...this.params, ...this.default },
        this.page,
        "POST"
      );
      this.page = response.page;
      response.data.forEach((element) => {
        element.select_tab_name_2 = element.select_tab_name;
        element.unselect_tab_name_2 = element.unselect_tab_name;
        if (element.tab_name_type == 2) {
          element.select_color = this.colorRgba(element.select_color);
          element.unselect_color = this.colorRgba(element.unselect_color);
        }
      });
      this.data = response.data;
      this.loading = false;
    },
    /**保存 */
    async rowSave(row, done, loading) {
      if (row.start_time > row.end_time) {
        loading();
        return this.$message.error("开启时间不可大于结束时间");
      }
      delete row["id"];

      let userInfo = this.$store.state.user.userInfo;
      row.edit_admin_name = userInfo.username;
      row.edit_admin_id = userInfo.id;

      let pushData = this.paramsVerifyAndFormat(row);

      let data = await common(`${baseURL.save}`, pushData, null, "POST");
      if (data == null) {
        loading();
        return;
      }

      this.getList();
      done();
    },
    /**修改 */
    async rowUpdate(row, index, done, loading) {
      if (row.start_time > row.end_time) {
        loading();
        return this.$message.error("开启时间不可大于结束时间");
      }

      let userInfo = this.$store.state.user.userInfo;
      row.edit_admin_name = userInfo.username;
      row.edit_admin_id = userInfo.id;

      let pushData = this.paramsVerifyAndFormat(row);

      let data = await common(`${baseURL.update}`, pushData, null, "POST");
      if (data == null) {
        loading();
        return;
      }

      this.getList();
      done();
    },
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**删除 */
    rowDel(row) {
      console.log(row);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        type: "warning",
      })

        .then(async () => {
          let response = await common(
            `${baseURL.delete}`,
            { id: row.id },
            null,
            "GET"
          );
        })
        .then(() => {
          this.getList();
        });
    },

    //设置标签为默认
    setDefault(id) {
      let userInfo = this.$store.state.user.userInfo;
      this.$confirm("此操作将修改默认选中, 是否继续?", "提示", {
        type: "warning",
      })
        .then(async () => {
          let response = await common(
            `${baseURL.setDefault}`,
            { id: id ,edit_admin_name : userInfo.username , edit_admin_id : userInfo.id},
            null,
            "POST"
          );
        })
        .then(() => {
          this.getList();
        });
    },
    /**设置上下线 */
    async setIsOnline(is_online, id) {
      let userInfo = this.$store.state.user.userInfo;
      await common(baseURL.setIsOnline, { is_online, id , edit_admin_name : userInfo.username , edit_admin_id : userInfo.id}, null, "POST");
      this.getList();
    },
    /**搜索 */
    searchChange(params, done) {
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },
    /**参数格式化(保存,修改) */
    paramsVerifyAndFormat(data) {
      let pushData = { ...data };
      //判断本次提交是否选择了图片类型
      //tab名称类型 1 图片  2 文字
      let type = pushData.tab_name_type;
      if (type == 1) {
        pushData.select_tab_name = pushData.select_tab_name_2;
        pushData.unselect_tab_name = pushData.unselect_tab_name_2;
      }
      delete pushData.select_tab_name_2;
      delete pushData.unselect_tab_name_2;
      return pushData;
    },
    colorRgba(sHex) {
      // 十六进制颜色值的正则表达式
      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/;
      /* 16进制颜色转为RGB格式 */
      var sColor = sHex.toLowerCase();
      var alpha = 1;
      if (sColor && reg.test(sColor)) {
        if (sColor.length === 4 || sColor.length === 5) {
          var sColorNew = "#";
          for (var i = 1; i < sColor.length; i += 1) {
            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
          }
          sColor = sColorNew;
        }
        // 如果有透明度再执行
        if (sColor.length === 9) {
          alpha = (parseInt("0x" + sColor.slice(7, 9)) / 255).toFixed(2);
        }
        //  处理六位的颜色值
        var sColorChange = [];
        for (var i = 1; i < 7; i += 2) {
          sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        return "rgba(" + sColorChange.join(",") + "," + alpha + ")";
      } else {
        return sColor;
      }
    },
  },
};
</script>


